<script setup>
import { ref } from 'vue'
import HmRef from './components/HmRef.vue'
/*
vue2 ref:1:获取原生标签dom   2:获取组件的实例对象

ref
1:定义响应式数据
2：获取原生标签dom 
   a:导入ref
   b:定义ref  const h3Dom=ref(null/undefined)
   c:原生标签上绑定ref   ref='h3Dom'
   d:访问 h3Dom.value
3：获取组件的实例对象上的暴露出来的方法与属性
   a:导入ref
   b:定义ref  const h3Dom=ref(null/undefined)
   c:组件标签上绑定ref   ref='h3Dom'
   d:访问 h3Dom.value
   f:组件需要暴露出供访问的属性与方法
      defineExpose({属性名,方法名})
      h3Dom.value.属性名
      h3Dom.value.方法名()
*/
const h3Dom = ref(null)
const btnClick = () => {
  console.log(h3Dom.value)
}
const comRef = ref(null)
const btnClick2 = () => {
  console.log(comRef.value.num)
  comRef.value.fn()
}
</script>

<template>
  <div class="-page">
    <h3 ref="h3Dom">我是父组件</h3>
    <button @click="btnClick">打印h3的dom</button>
    <hr />
    <HmRef ref="comRef"></HmRef>
    <button @click="btnClick2">打印HmRef组件的属性与方法</button>
  </div>
</template>

<style scoped></style>
